<template>
  <a-breadcrumb class="breadcrumb">
    <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
      <router-link v-if="item.name != name" :to="{ path: item.path }">
        {{ item.meta.title }}
      </router-link>
      <span v-else>{{ item.meta.title }}</span>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
  export default {
    data () {
      return {
        name: '',
        breadList: []
      }
    },

    created () {
      this.getBreadcrumb()
    },

    methods: {
      getBreadcrumb () {
        console.log('this.$route.matched', this.$route.matched)

        this.breadList = []
        this.breadList.push({ name: 'index', path: '/board/', meta: { title: '首页' } })

        this.name = this.$route.name
        this.$route.matched.forEach((item) => {
          // item.meta.name === 'board' ? item.path = '/board' : this.$route.path === item.path
          this.breadList.push(item)
        })
      }
    },

    watch: {
      $route () {
        this.getBreadcrumb()
      }
    }
  }
</script>

<style scoped>

</style>
